<!--
 * @author: Kate-sy
 * @create: 2021-06-23 14:53 PM
 * @license: MIT
 * @lastAuthor: Kate-sy
 * @lastEditTime: 2021-06-23 15:40 PM
 * @desc: 
-->
<template>
  <div class="log-conter">
    <div class="log-wrap">
      <div class="log-title">掘金-juejin.cn</div>
      <div class="log-desc">一个帮助开发者成长的社区</div>
      <div class="phon">
        <input type="text" placeholder="邮箱/手机号（国际号码加区码）" />
        <input type="password" placeholder="请输入密码" />
        <button>立即登录</button>
      </div>
      <div class="log-boten">
        <section>注册登录即表示</section>
        <article>
          同意 <span class="span">用户协议</span> 、<span class="span"
            >隐私政策</span
          >
        </article>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Log",
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.log-conter {
  background-color: #fff;
  width: 240px;
  margin-bottom: 15px;
  box-shadow: 0 0 5px rgb(226, 226, 226);
  .log-wrap {
    padding: 16px;
    .log-title {
      @include font(15px, #2e3135, 550);
      margin-bottom: 5px;
    }
    .log-desc {
      @include font(14px, #2e3135);
      margin-bottom: 5px;
    }
    .phon {
      display: flex;
      flex-wrap: wrap;
      input {
        outline: none;
        height: 37px;
        width: 100%;
        text-indent: 10px;
        background-color: #fbfbfb;
        border-radius: 2px;
        border: 1px solid #c0c0c0;
        @include flex(space-between);
        @include font(13px, #c0c0c0);
        margin-bottom: 10px;
      }
      button {
        width: 100%;
        height: 37px;
        border: none;
        background-color: #007fff;
        color: #fff;
        font-size: 14px;
        &:hover {
          background-color: #0371df;
          cursor: pointer;
        }
      }
    }
    .log-boten {
      margin-top: 20px;
      section {
        @include font(14px, #767676);
        margin-bottom: 3px;
      }
      article {
        @include font(14px, #767676);
      }
    }
  }
}
.span {
  @include font(14px, #007fff);
}
</style>